1、可以使用合法的尺寸单位,百分比;
2、可以使用负值,当使用负值时,元素的偏移方向与正值相反
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css</title>
<style type="text/css">
.hhxs{width:400px;height:400px;border:3px solid purple;margin:50px auto;position:relative;
position:relative;
}
.box{width:302px;height:302px;border:3px solid blue;margin:50px auto;
}
.pst1,.pst2,.pst3{width:100px;height:100px;color:white;font-size:30px;line-height:100px;text-align:center}
.pst1{background:green; }
.pst2{background:blue;
}
.pst3{background:orange;
position:absolute;
left:-100px;
}
</style>
</head>
<body>
<div class="hhxs">
<div class="box">
<div class="pst1">1</div>
<div class="pst2">2</div>
<div class="pst3">3</div>
</div>
</div>
</body>
</html>
返回值:
3、元素相对于哪个元素进行定位,使用百分比时,就是哪个元素宽度或高度的百分比。
<style type="text/css">
.hhxs{width:400px;height:400px;border:3px solid purple;margin:50px auto;position:relative;
}
.box{width:302px;height:302px;border:3px solid blue;margin:50px auto;
position:relative;
}
.pst1,.pst2,.pst3{width:100px;height:100px;color:white;font-size:30px;line-height:100px;text-align:center}
.pst1{background:green; }
.pst2{background:blue;
position:absolute;
right:100%;
}
.pst3{background:orange;
position:absolute;
left:100%;
top:100%;
}
</style>
返回值: